<template>
  <view class="section-choice">
    <view class="header">
      <text class="title">选择科室</text>
    </view>
    <scroll-view scroll-y="true" class="my-scroll-view">
      <view class="section-list">
        <view @click="choiceSection(section)" class="section-item" v-for="(section) in sectionList" :key="section.id">
          <text class="hospital-name">{{ section.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import * as http from '@/utils/http'
  import {
    ref,
    defineEmits,
    defineProps,
    onMounted,
    watch
  } from 'vue';
const props  = defineProps({
  choseId: {
    type: String,
    required: true
  }
})
  const sectionList = ref([])
  //获取医院id
  
  watch(() => props.choseId, (newCode, oldCode) => {  
    let param = {
      hospitalId: newCode,
      pageNo: 1,
      pageSize: 100
    }
     getSection(param)
  } );
  
  async function getSection(param) {
    //获取
    const result = await http.getRequest("/peizhen/hospital/section/page", param)
    if (result.code == 0) {
      sectionList.value = result.data.list
    } else {
      uni.showToast({
        title: '获取科室失败失败',
        icon: 'error',
        duration: 1000
      })
    }
  }

  //传值给父
  const emit = defineEmits(['sendSection:value']); // 定义可以触发的自定义事件
  function choiceSection(section) {
    console.log(section);
    emit('sendSection:value', section); // 触发事件并传递值  
  }
</script>

<style lang="scss" scoped>
  .header {
    .title {
      margin: 20rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 40rpx;
    }
  }

  .my-scroll-view {
    height: 800rpx;
  }
  
  .section-item{
    margin: 20rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 30rpx;
    text-align: center;
    padding: 30rpx;
    border-bottom:solid 3rpx #B7BDC6 ;
  
  }
</style>